<template>
	<view class="content">
		<u-search placeholder="请输入搜索内容" v-model="title" :actionStyle="{fontWeight:700}" @custom="upData"></u-search>
		<view class="myAlbumList">
			<view class="myAlbumItem" v-for="(item ,index) in albumList">
				<view class="title">
					{{item.time}} {{item.title}}
				</view>
				<view class="imageList">
					<view class="img" @touchstart="touchstart(index,indexs)" @tap="touchstartTap(item,index,indexs)"
						@longpress="onLongPress(index,indexs)" @touchend="touchend" v-for="(items ,indexs) in item.docx"
						:key="indexs">
						<image :style="{transform:Xindex==index&&Xindexs==indexs?'scale(.8)':'scale(1)' }"
							:src="items.docx" mode="aspectFill"></image>
						<view class="choice" v-if="state">
							<u-icon name="checkmark-circle-fill" size="42rpx" color="#FFCB71" v-if="items.tapCode">
							</u-icon>
						</view>

					</view>
				</view>
			</view>
		</view>
		<view :class="{compile_box:true,compile_box_state:!state}">
				<view class="compile_text">
				已选择{{deleteAlbumArr.length}}项
			</view>
		<view :class="{compile:true,compile_state:!state}">
	
			<view class="btn" @click="setCompleteState">
				{{completeState?'取消全选':'全选'}}
			</view>
			<u-icon name="close-circle-fill" size="54rpx" color="#333" @click="state=false"></u-icon>

			<view class="btn" @click="this.experienceShow=true">
				删除
			</view>
		</view>
		</view>

		
		
		
		<u-popup :show="experienceShow" @close="experienceShow=false" mode="center" :safeAreaInsetBottom="false"
			closeable round="12rpx">
			<view style="padding: 0 50upx;width: calc(100vw - 200upx);">
				<view class=""
					style="font-size: 32upx;color: #333333;text-align: center;font-weight: 700;margin-top: 90upx;">
					是否删除所选{{deleteAlbumArr.length}}张图片？
				</view>

				<view class="" style="display: flex;justify-content: space-between;margin-bottom: 30upx;">
					<view class="anew_btn" @click="confirmDelete" style="background-color: #ccc;
		color: #333;">
						删除
					</view>
					<view class="anew_btn" @click="experienceShow=false">
						取消
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				albumList: [],
				Xindex: -1,
				Xindexs: -1,

				state: false,
				deleteAlbumArr:[],
				
				experienceShow:false,
				
				completeState:false
			}
		},
		onLoad() {
			this.upData()
		},
		watch:{
			state(newVal,oldVal){
				// console.log()
				if(!newVal) {
					this.deleteAlbumArr=[]
					this.albumList.forEach(item => {
						item.docx.forEach(items => {
							items.tapCode = false
						})
					})
				}
			}
		},
		methods: {
			upData() {
				this.$myRuquest('home/user/user_photo', {
					title: this.title
				}).then(res => {
					res.data.forEach(item => {
						item.docx.forEach(items => {
							items.tapCode = false
						})
					})

					this.albumList = res.data
				})
			},
			setCompleteState(){
				this.albumList.forEach(item => {
					item.docx.forEach(items => {
						items.tapCode = !this.completeState
					})
				})
				this.deleteAlbum()
				this.completeState=!this.completeState
			},
			touchstart(index, indexs) {
				this.Xindex = index
				this.Xindexs = indexs
			},
			touchstartTap(item, index, indexs) {
				if (this.state) {
					this.albumList[index].docx[indexs].tapCode = !this.albumList[index].docx[indexs].tapCode
					this.deleteAlbum()
				} else {
					setTimeout(() => {
						let docx = []
						item.docx.forEach(items => {
							docx.push(items.docx)
						})
						this.$util.enlargement(docx, indexs)
					}, 100)
				}
			},
			touchend() {
				setTimeout(()=> {
					this.Xindex = -1
					this.Xindexs = -1
				}, 50)
			},
			deleteAlbum(){
				let deleteAlbumArr=[]		
				this.albumList.forEach(item => {
					item.docx.forEach(items => {
						if(items.tapCode) deleteAlbumArr.push(items.id)
					})
				})
				this.deleteAlbumArr=deleteAlbumArr
				
			},

			onLongPress(index,indexs) {
				this.Xindex = -1
				this.Xindexs = -1
				this.state = true
				
				this.albumList[index].docx[indexs].tapCode = !this.albumList[index].docx[indexs].tapCode
				this.deleteAlbum()
				uni.vibrateShort({
					success: function() {
						console.log('success');
					}
				});
			},
			confirmDelete(){
				let id=this.deleteAlbumArr.join(',')
				this.$myRuquest('home/user/user_photo_del',{id}).then(res=>{
					this.state = false
					this.experienceShow=false
					this.upData()
					uni.showToast({
						title: '已删除',
						icon:'none'
					});
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 20upx 30upx;

	}
	.compile_text{
		 position: absolute;
		 left: 50%;
	  transform: translateX(-50%);
		 top: -50upx;
		 font-size: 24upx;
		 opacity: 1;
		 transition: all .2s ease-out .3s;
		 white-space: nowrap;
	}
.compile_box{
	position: fixed;
		 transform: translateX(-50%);
	left: 50%;
	bottom: 50upx;

		.compile {
		background-color: #fff;
		height: 120upx;
		width: 560upx;
		border-radius: 120upx;
			position: relative;
	
		box-shadow: 0 0 10upx #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
		transition: width .3s ease-out .3s, height .3s ease-out .3s, bottom .3s,opacity 1s;
		overflow: hidden;
		opacity: 1;

		.btn {
			width: 200upx;
			text-align: center;
			transition: all .3s;
			overflow: hidden;
			 white-space: nowrap;
		}

	}

}
.compile_box_state{
	.compile_text{
		opacity: 0;
	}
	.compile_state {
		.btn {
			width: 0;
			
		}
	
		width: 60upx;
		height: 60upx;
		bottom: 0upx;
		opacity: 0;
	}
	
}
	
	.myAlbumList {
		.myAlbumItem {

			// padding: 20upx 0;
			.title {
				padding: 20upx 0;
				font-size: 24upx;
				color: #999999;
			}

			.imageList {
				display: flex;
				flex-wrap: wrap;

				.img {
					width: 24.47%;
					height: 166rpx;
					// height: 24%;
					margin-right: .53%;
					margin-bottom: 5upx;
					position: relative;

					.choice {
						position: absolute;
						bottom: 10upx;
						right: 10upx;
						width: 40upx;
						height: 40upx;
						border-radius: 50%;
						border: 1upx solid #fff;
						background-color: rgba(0, 0, 0, .4);
						display: flex;
						align-items: center;
						justify-content: center;
					}

					image {
						width: 100%;
						height: 100%;
						transition: all .35s;
						// border: 1rpx solid #707070;
					}
				}


				image:nth-child(4n) {
					margin-right: 0;
				}
			}
		}
	}
	
	.anew_btn {
		width: 234upx;
		height: 68upx;
		line-height: 68upx;
		border-radius: 34upx;
		text-align: center;
		background-color: #FED194;
		color: #AC7D3D;
		font-size: 28upx;
		margin-top: 40upx;
	}
</style>
